<template lang="pug">
  #sidebar(@mouseenter='changeHover(true)',@mouseleave='changeHover(false)')
    //- SidebarHeader(
    //-   :systemMenuShow="systemMenuShow"
    //-   :menuActive='menuActive'
    //-   @toggleMenu="toggleMenu"
    //-   @toggleSystemMenu="toggleSystemMenu")
    NavList(:navTree="currentMenus")
    SystemMenu(:navTree="systems",:isShow="systemMenuShow",@changeSystem="changeSystem")
</template>

<script>
// import { fullPath } from '../nav'

import { changeUrl } from '@/utils/auth'

import SidebarHeader from './Header'
import NavList from './NavList'
import SystemMenu from './SystemMenu'

export default {
  name: 'Sidebar',
  components: {
    SidebarHeader,
    NavList,
    SystemMenu
  },
  props: {
    systems: Array,
    menuActive: Boolean,
    systemMenuShow: Boolean,
    currentSystemId: Number
  },
  computed: {
    // currentFullPath () {
    //   return fullPath(this.$route, this.routesPure).map(item => item.url)
    // },
    // navList () {
    //   return this.routesPure.map(item => {
    //     const isPath = this.currentFullPath.indexOf(item.url) > -1
    //     item.isOpen = isPath
    //     item.isCurrent = isPath
    //     return item
    //   })
    // },
    currentMenus () {
      return this.systems.find(({ id }) => id === this.currentSystemId).children
    }
    // systemNavTree () {
    //   console.log(this.navTree)
    //   return this.navTree.find(nav => {
    //     return this.currentFullPath[0] === nav.url
    //   }).children
    // }
  },
  methods: {
    toggleMenu () {
      this.$emit('toggleMenu')
    },
    toggleSystemMenu () {
      this.systemMenuShow = !this.systemMenuShow
    },
    changeSystem (url) {
      changeUrl(url)
      this.systemMenuShow = false
    },
    changeHover (state) {
      this.$emit('changeHover', state)
    }
  }
}
</script>

<style lang="sass">
</style>
